<template>
  <view>

    <view class="topbar">
      <view class="leftIcon" @click="listHandel()" v-if="showList">
        <u-icon name="list" color="#4C75FF" size="30"></u-icon>
      </view>

      <view class="content">
        <span class="title">{{ title }}</span>
      </view>

      <view class="rightIcon">


        <u-grid :border="false">
          <u-grid-item>
            <u-icon custom-prefix="custom-icon-fenxiang custom-icon" color="#4C75FF" size="20" @click="shareHandel"
              v-if="teamStatus"></u-icon>
          </u-grid-item>


          <u-grid-item>
            <u-icon name="search" color="#4C75FF" size="25" @click="searchHandel"></u-icon>
          </u-grid-item>


          <u-grid-item>
            <u-icon name="plus" color="#4C75FF" size="25" @click="showMoreMenuHandel" v-if="showMore"></u-icon>
          </u-grid-item>
        </u-grid>



      </view>
    </view>


    <u-popup :show="show" mode="left" @close="close" @open="open" :closeable="false">
      <view v-if="showUser">
        <view class="popContent">
          <view class="login">
            <u-avatar size="60" :src="userInfo.avatar"></u-avatar>
            <view class="userInfo">
              <view class="userName">{{ userInfo.nickname }}</view>

              <view class="progress">
                <u-line-progress :percentage="30" activeColor="#4C75FF" :showText="false"></u-line-progress>
              </view>

            </view>
          </view>
        </view>

        <!-- <u-cell size="large" title="切换空间" :border="false">

        </u-cell> -->


        <u-cell-group>



          <u-cell size="large" title="个人空间 " @click="teamSwitchHandel(1)">
            <u-icon slot="icon" size="24" name="home-fill" color="#4C75FF"></u-icon>
            <view slot="value">
              <u-icon slot="icon" size="20" :name="!teamStatus ? 'checkbox-mark' : 'arrow-right'"
                color="#4C75FF"></u-icon>
            </view>
          </u-cell>

          <view v-for="(item, index) in teamList" :key="index">
            <u-cell size="large" @click="teamSwitchHandel(item, index)">

              <u-icon slot="icon" size="20" custom-prefix="custom-icon-td-face custom-icon" color="#4C75FF"></u-icon>

              <view slot="title" class="u-slot-title">
                <view class="title_text">{{ item.creatorName }}</view>
                <u-tag text="管理员" plain size="mini" type="warning" v-if="item.role == 'MANAGER'" />
                <u-tag text="创建者" plain size="mini" type="success" v-if="item.role == 'OWNER'" />
              </view>


              <view slot="value">
                <u-icon slot="icon" size="20" :name="teamIndex == index ? 'checkbox-mark' : 'arrow-right'"
                  color="#4C75FF"></u-icon>
              </view>

            </u-cell>
          </view>



          <u-cell size="large" title="加入团队" @click="showTeam = true; show = false">
            <u-icon slot="icon" size="28" name="man-add" color="#4C75FF"></u-icon>
            <view slot="value">
              <u-icon slot="icon" size="18" name="arrow-right" color="#909399"></u-icon>
            </view>
          </u-cell>


          <u-cell v-if="addTeam" size="large" title="创建团队" @click="show = false" isLink url="/pages/team/team">
            <u-icon slot="icon" size="28" name="plus-people-fill" color="#4C75FF"></u-icon>
          </u-cell>


        </u-cell-group>

        <view class="menu">
          <u-grid :border="false" col="4">

            <u-grid-item>
              <u-icon name="setting" color="#2979ff" label="设置" size="24" labelPos="bottom" labelSize="14px"
                @click="clickHandel(1)"></u-icon>
            </u-grid-item>


            <u-grid-item>

              <view class="icon_box">
                <u-icon name="bell" color="#2979ff" label="消息" size="24" labelPos="bottom" labelSize="14px"
                  @click="clickHandel(2)">
                </u-icon>

                <u-badge bgColor="red" :absolute="true" max="99" :value="msgValue" :offset="[0, 0]"></u-badge>
              </view>


            </u-grid-item>


            <u-grid-item>
              <u-icon name="chat" color="#2979ff" label="客服" size="24" labelPos="bottom" labelSize="14px"
                @click="clickHandel(3)"></u-icon>
            </u-grid-item>


            <u-grid-item>
              <u-icon name="email" color="#2979ff" label="反馈" size="24" labelPos="bottom" labelSize="14px"
                @click="clickHandel(4)"></u-icon>
            </u-grid-item>



          </u-grid>


          <!-- <u-icon name="setting" color="#2979ff" label="设置" size="24" labelPos="bottom" labelSize="14px"
            @click="clickHandel(1)"></u-icon>

          <view class="icon_box" style="position: relative">
            <u-icon style="position: relative;" name="bell" color="#2979ff" label="消息" size="24" labelPos="bottom"
              labelSize="14px" @click="clickHandel(2)">
            </u-icon>
            <u-badge style="position: absolute" type="success" max="99" :value="11"></u-badge>
          </view>




          <u-icon name="chat" color="#2979ff" label="客服" size="24" labelPos="bottom" labelSize="14px"
            @click="clickHandel(3)"></u-icon>
          <u-icon name="email" color="#2979ff" label="反馈" size="24" labelPos="bottom" labelSize="14px"
            @click="clickHandel(4)"></u-icon> -->
        </view>

      </view>


      <view v-else class="popContent">
        <view class="login">
          <u-avatar size="60"></u-avatar>
          <view class="userInfo">
            <view class="userName">请登录~</view>
          </view>
        </view>
      </view>

    </u-popup>


    <u-popup :show="addshow" mode="center" @close="addclose" round="20" :safeAreaInsetBottom="false">
      <view class="add_menu">


        <u-grid :border="false">

          <u-grid-item :customStyle="{ width: 200 + 'rpx', height: 180 + 'rpx' }" v-if="showAddFile">
            <u-icon name="file-text" color="#2979ff" size="40" label="新建流程图" labelPos="bottom" labelSize="18"
              @click="addfileHandel"></u-icon>
          </u-grid-item>

          <u-grid-item :customStyle="{ width: 200 + 'rpx', height: 180 + 'rpx' }" v-if="!showAddFile">
            <u-icon color="#2979ff" custom-prefix="custom-icon-naotu custom-icon" size="40" label="新建脑图"
              labelPos="bottom" labelSize="18" @click="addMindMap"></u-icon>
          </u-grid-item>

          <u-grid-item :customStyle="{ width: 200 + 'rpx', height: 180 + 'rpx' }">
            <u-icon custom-prefix="custom-icon-mobankuangjia-xianxing custom-icon" color="#2979ff" size="40"
              label="从模板新建" labelPos="bottom" labelSize="18" @click="modelfileHandel"></u-icon>
          </u-grid-item>

          <u-grid-item :customStyle="{ width: 200 + 'rpx', height: 180 + 'rpx' }">
            <u-icon custom-prefix="custom-icon-wenjianjia custom-icon" color="#2979ff" size="40" label="新建文件夹"
              labelPos="bottom" labelSize="18" @click="folderHandel"></u-icon>
          </u-grid-item>



          <u-grid-item :customStyle="{ width: 200 + 'rpx', height: 180 + 'rpx' }" v-if="showManage">
            <u-icon custom-prefix="custom-icon-td-line custom-icon" color="#2979ff" size="40" label="团队管理"
              labelPos="bottom" labelSize="18" @click="manageTeam"></u-icon>
          </u-grid-item>


          <u-grid-item v-if="teamStatus && teamRole != 'OWNER'"
            :customStyle="{ width: 200 + 'rpx', height: 180 + 'rpx' }">
            <u-icon custom-prefix="custom-icon-tuichutuandui custom-icon" color="#2979ff" size="40" label="退出团队"
              labelPos="bottom" labelSize="18" @click="outModal = true"></u-icon>
          </u-grid-item>

        </u-grid>





      </view>
    </u-popup>

    <u-modal :show="showModal" title="新建空白文件" @cancel="cancel" @confirm="confirm" :showCancelButton="true">
      <view class="slot-content">


        <u--form labelPosition="left" :model="model2" labelWidth="80" ref="uForm2" :rules="rules2">

          <u-form-item label="文件名" prop="fileName" borderBottom ref="item2">

            <u--input placeholder="请输入文件名称" border="none" v-model="model2.fileName"></u--input>

          </u-form-item>

        </u--form>


      </view>
    </u-modal>


    <u-modal :show="showAddModel" title="从模板新建" @cancel="cancel" @confirm="modelConfirm" :showCancelButton="true">
      <view class="slot-content">

        <u--form labelPosition="left" :model="model" labelWidth="80" ref="uForm" :rules="rules">

          <u-form-item label="文件名" prop="name" borderBottom ref="item1">

            <u--input v-model="model.name" placeholder="请输入文件名" border="none"></u--input>

          </u-form-item>

          <u-form-item label="模板" prop="modelName" borderBottom @click="pickerShow = true;" ref="item1">

            <u--input v-model="model.modelName" disabled disabledColor="#ffffff" placeholder="请选择模板"
              border="none"></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>


          </u-form-item>
        </u--form>

        <u-picker :show="pickerShow" ref="uPicker" @cancel="pickerCancel" @confirm="pickerConfirm" :loading="loading"
          :columns="columns" @change="changeHandler" keyName="name"></u-picker>
      </view>
    </u-modal>


    <u-modal :show="showFolder" title="新建文件夹" @cancel="cancel" @confirm="folderConfirm" :showCancelButton="true">
      <view class="slot-content">

        <u--form labelPosition="left" :model="model3" labelWidth="80" ref="uForm3" :rules="rules3">

          <u-form-item label="文件夹名称" prop="name" borderBottom ref="item1">

            <u--input v-model="model3.name" placeholder="请输入文件夹名称" border="none"></u--input>

          </u-form-item>

        </u--form>

      </view>
    </u-modal>



    <u-modal :show="showTeam" title="加入团队" @cancel="cancel" @confirm="teamConfirm" :showCancelButton="true"
      confirmText="申请加入团队">
      <view class="slot-content">

        <u--form labelPosition="left" :model="model4" labelWidth="70" ref="uForm4" :rules="rules4">

          <u-form-item label="团队ID" prop="code" borderBottom ref="item4">
            <u-search v-model="model4.code" :showAction="true" @search="searchIdHandel" @custom="searchIdHandel"
              placeholder="请输入团队ID" actionText="搜索" :animation="true"></u-search>
          </u-form-item>


          <u-form-item label="团队名称" prop="teamName" borderBottom ref="item4">
            <u--input v-model="model4.teamName" disabled disabledColor="#ffffff" border="none"></u--input>
          </u-form-item>

        </u--form>

        <u-picker :show="pickerShow" ref="uPicker" @cancel="pickerCancel" @confirm="pickerConfirm" :loading="loading"
          :columns="columns" @change="changeHandler" keyName="name"></u-picker>
      </view>
    </u-modal>


    <u-modal :show="outModal" title="退出团队" content='确定退出吗？' @confirm="outUser" @cancel="outModal = false"
      :showCancelButton="true"></u-modal>


    <u-toast ref="uToast"></u-toast>

    <u-modal :show="shareTeamModal" title="分享团队" @confirm="shareTeamConfirm" confirmText="复制ID">
      <view class="slot-content">
        <view class="modal_box">
          <span class="text">您要分享的团队ID为:
            <span class="team_code">{{ teamCode }}，</span>
            复制此ID发送给好友即可搜索此团队</span>
          <image class="image_icon" src="https://v2-h5.uviewui.com/static/uview/common/logo.png"></image>
        </view>
      </view>
    </u-modal>

  </view>


</template>

<script>
import { getToken } from '@/utils/auth'
import { createdFile, getTempList, getFile, createFolder, searchTeamId, joinTeam, applyTeam, exitTeam, applyList } from '@/api/api'

import { mapState, mapMutations } from 'vuex'
import defultData from './data.json'
export default {
  props: {
    title: {
      type: String,
      default: "我的文件",
    },
    userInfo: {
      type: Object,
      default: {},
    },
    showAddFile: {
      type: Boolean,
      default: true,
    },
    showList: {
      type: Boolean,
      default: true,
    },
    mindMapType: {
      type: Boolean,
      default: false,
    },
    showMore: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      show: false,
      showUser: false,
      addshow: false,
      showModal: false,
      showAddModel: false,
      pickerShow: false,
      loading: false,
      showFolder: false,
      showTeam: false,
      showManage: false,
      showOut: false,
      outModal: false,
      teamInfo: {},
      role: true,
      shareTeamModal: false,
      teamIndex: null,
      msgValue: 0,
      type: 1,
      teamId: "",
      model: {
        name: "",
        svg: "",
        modelName: "",
        modelId: "",
      },
      model2: {
        fileName: "",
      },
      model3: {
        name: "",
      },
      model4: {
        code: "",
        teamName: "",
      },
      columns: [
        [{
          name: "思维导图",
          label: "1"
        }, {
          name: "流程图",
          label: "2"
        }, {
          name: "思维笔记",
          label: "3"
        }],
        []
      ],
      rules: {
        'name': {
          type: 'string',
          required: true,
          message: '请填写文件名称',
          trigger: ['blur', 'change']
        },
        'modelName': {
          type: 'string',
          required: true,
          message: '请选择模板',
          trigger: ['blur', 'change']
        },
      },
      rules2: {
        'fileName': {
          type: 'string',
          required: true,
          message: '请填写文件名称',
          trigger: ['blur', 'change']
        },
      },
      rules3: {
        'name': {
          type: 'string',
          required: true,
          message: '请填写文件夹名称',
          trigger: ['blur', 'change']
        },
      },
      rules4: {
        'code': {
          type: 'string',
          required: true,
          message: '请输入团队ID',
          trigger: ['blur', 'change']
        },
        'teamName': {
          type: 'string',
          required: true,
          message: '团队名称不正确',
          trigger: ['blur', 'change']
        },
      },
    };
  },
  computed: {
    ...mapState(['teamStatus', 'folderId', "teamList", "addTeam", "currentTeamId", "teamRole", "teamCode"])
  },
  onReady() {
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    this.$refs.uForm.setRules(this.rules)
    this.$refs.uForm2.setRules(this.rules2)
    this.$refs.uForm3.setRules(this.rules3)
  },
  methods: {
    ...mapMutations([
      "personHandel", "teamHandel", "getTeamList"
    ]),
    shareHandel() {
      this.shareTeamModal = true
    },
    shareTeamConfirm() {
      const that = this
      uni.setClipboardData({
        data: that.teamCode,
        // success: () => {
        //   that.$refs.uToast.show({
        //     type: 'success',
        //     message: "复制成功",
        //   })

        // },
        // fail: () => {
        //   that.$refs.uToast.show({
        //     type: 'error',
        //     message: "复制失败",
        //   })

        // }
      })
      that.shareTeamModal = false
    },
    showMoreMenuHandel() {
      if (this.teamStatus) {
        // this.teamList.forEach(e => {
        //   if (e.role == 'OWNER' || e.role == 'MANAGER') {
        //     this.showManage = true
        //     this.showOut = true
        //     this.addshow = true
        //   } else {
        //     this.showManage = false
        //   }
        // })
        this.showManage = true
        this.showOut = false
        this.addshow = true
      } else {
        this.showManage = false
        this.showOut = false
        this.addshow = true
      }

    },
    teamSwitchHandel(item, index) {
      if (item === 1) {
        this.teamIndex = null
        this.personHandel()
        this.$emit("success")
        this.show = false
      } else {
        this.teamIndex = index
        this.teamInfo = item
        this.teamHandel(item)
        this.$emit("success")
        this.show = false
      }
    },
    listHandel() {
      this.show = true
    },
    manageTeam() {
      uni.navigateTo({
        url: '/pages/manageteam/manageteam'
      });
      this.addshow = false
    },
    outUser() {
      exitTeam(this.currentTeamId).then(res => {
        if (res.code === 200) {
          this.outModal = false
          this.addshow = false
          uni.$u.toast({
            type: 'success',
            message: "退出成功",
          })
        }
      })
    },
    open() {
      const token = getToken()
      if (token !== '') {
        this.showUser = true
      }
      this.getTeamList()
      this.teamList.forEach(e => {
        //查询我创建的团队申请列表数
        if (e.role == 'OWNER') {
          applyList(e.teamId).then(res => {
            this.msgValue = res.data.length
          })
        }
      })
    },
    close() {
      this.show = false
      // console.log('close');
    },
    clickHandel(item) {
      switch (item) {
        case 1: {
          uni.navigateTo({
            url: '/pages/setting/setting'
          });
          break
        }
        case 2: {
          uni.navigateTo({
            url: '/pages/message/message'
          });
          break
        }
        case 3: {
          uni.navigateTo({
            url: '/pages/chat/chat'
          });
          break
        }
        case 4: {
          uni.navigateTo({
            url: '/pages/email/email'
          });
          break
        }
      }
      this.show = false
    },
    addclose() {
      this.addshow = false
    },
    addfileHandel() {
      this.showModal = true
      this.addshow = false
    },
    addMindMap() {
      this.showModal = true
      this.addshow = false
      this.type = 2
    },
    searchIdHandel() {
      searchTeamId(this.model4.code).then(res => {
        this.model4.teamName = res.data.creatorName
        this.teamId = res.data.teamId
      })
    },

    getModelTem(args) {
      this.columns[1] = []
      getTempList({ typeId: args }).then(res => {
        res.data.rows.forEach(e => {
          this.columns[1].push({ name: e.name, label: e.fileId })
        });
      })
    },
    cancel() {
      this.model2 = {
        name: "",
      }
      this.showModal = false
      this.showAddModel = false
      this.showFolder = false
      this.showTeam = false
    },
    searchHandel() {
      uni.navigateTo({
        url: '/pages/search/search'
      })
    },
    modelfileHandel() {
      this.showAddModel = true
      this.addshow = false
      this.getModelTem(1)
    },
    changeHandler(e) {
      const {
        columnIndex,
        index,
        picker = this.$refs.uPicker
      } = e

      this.model.modelName = `${e.values[0][e.indexs[0]].name} - ${e.values[1][e.indexs[1]].name} `
      if (columnIndex === 0) {
        this.getModelTem(e.value[0].label)
        picker.setColumnValues(1, this.columns[1])

      }
    },
    folderHandel() {
      this.showFolder = true
      this.addshow = false
    },

    // 新建空白文件
    confirm() {
      this.$refs.uForm2.validate().then(res => {
        // 不是团队状态
        let svg = ""
        if (!this.teamStatus) {
          if (this.type == 2) {
            svg = JSON.stringify(defultData)
          }
          createdFile({ name: this.model2.fileName, folderId: this.folderId, type: this.type, svg: svg }).then(res => {
            if (res.code = 200) {
              this.$refs.uToast.show({
                type: 'success',
                message: "创建成功",
              })
              this.showModal = false
              this.model2.fileName = ''
              this.type = 1
              this.$emit("success")
            }
          })
        } else {
          // 团队状态
          let svg = ""
          if (!this.teamStatus) {
            if (this.type == 2) {
              svg = JSON.stringify(defultData)
            }
          }
          createdFile({ name: this.model2.fileName, folderId: this.folderId, teamId: this.currentTeamId, type: this.type, svg: svg }).then(res => {
            if (res.code === 200) {
              this.$refs.uToast.show({
                type: 'success',
                message: "创建成功",
              })
              this.showModal = false
              this.model2.fileName = ''
              this.$emit("success")
            } else {
              uni.$u.toast(res.msg)
            }
          })
        }
      }).catch(errors => {
        console.log(errors)
        uni.$u.toast({
          type: 'default',
          message: "校验失败",
        })
      })
    },

    // 从模板新建
    modelConfirm() {
      // 不是团队状态
      if (!this.teamStatus) {
        if (!this.mindMapType) {
          // 不是脑图页面点击
          getFile(this.model.modelId).then(res => {
            let form = {
              name: this.model.name,
              svg: res.data.svg,
              folderId: this.folderId,
              type: 1
            }
            createdFile(form).then(res => {
              this.$refs.uToast.show({
                type: 'success',
                message: "创建成功",
              })
              this.$emit("success")
              this.pickerShow = false
              this.showAddModel = false
              this.model = {
                name: '',
                svg: '',
                modelName: '',
              }
            })
          })
        } else {
          // 脑图页面点击
          getFile(this.model.modelId).then(res => {
            let form = {
              name: this.model.name,
              svg: res.data.svg,
              folderId: this.folderId,
              type: 2
            }
            createdFile(form).then(res => {
              this.$refs.uToast.show({
                type: 'success',
                message: "创建成功",
              })
              this.$emit("success")
              this.pickerShow = false
              this.showAddModel = false
              this.model = {
                name: '',
                svg: '',
                modelName: '',
              }
            })
          })
        }
      } else {
        // 团队状态
        if (!mindMapType) {
          // 不是脑图页面点击
          getFile(this.model.modelId).then(res => {
            let form = {
              name: this.model.name,
              svg: res.data.svg,
              folderId: this.folderId,
              teamId: this.currentTeamId,
              type: 1
            }
            createdFile(form).then(res => {
              this.$refs.uToast.show({
                type: 'success',
                message: "创建成功",
              })
              this.$emit("success", true)
              this.pickerShow = false
              this.showAddModel = false
              this.model = {
                name: '',
                svg: '',
                modelName: '',
              }
            })
          })
        } else {
          // 脑图页面点击
          getFile(this.model.modelId).then(res => {
            let form = {
              name: this.model.name,
              svg: res.data.svg,
              folderId: this.folderId,
              teamId: this.currentTeamId,
              type: 2
            }
            createdFile(form).then(res => {
              this.$refs.uToast.show({
                type: 'success',
                message: "创建成功",
              })
              this.$emit("success", true)
              this.pickerShow = false
              this.showAddModel = false
              this.model = {
                name: '',
                svg: '',
                modelName: '',
              }
            })
          })
        }
      }
    },
    // 新建文件夹
    folderConfirm() {
      this.$refs.uForm3.validate().then(res => {
        // 不是团队状态
        if (!this.teamStatus) {
          let obj = this.model3
          if (this.mindMapType) {
            obj.ftype = 2
          } else {
            obj.ftype = 1
          }
          obj.parentId = this.folderId
          createFolder(obj).then(res => {
            this.$refs.uToast.show({
              type: 'success',
              message: "创建成功",
            })
            this.$emit("success")
            this.showFolder = false
            this.model3 = {}
          })
        } else { // 团队状态
          let obj = this.model3
          if (this.mindMapType) {
            obj.ftype = 2
          } else {
            obj.ftype = 1
          }
          obj.teamId = this.currentTeamId
          obj.parentId = this.folderId
          createFolder(obj).then(res => {
            this.$refs.uToast.show({
              type: 'success',
              message: "创建成功",
            })
            this.$emit("success")
            this.showFolder = false
            this.model3 = {}
          })
        }
      }).catch(errors => {
        uni.$u.toast({
          type: 'error',
          message: "校验失败",
        })
      })

    },
    pickerConfirm(e) {
      this.model.modelId = e.value[1].label
      this.pickerCancel()
    },
    pickerCancel() {
      this.pickerShow = false
    },

    // 申请加入团队
    teamConfirm() {
      applyTeam({ teamId: this.teamId }).then(res => {
        if (res.code === 200) {
          this.$refs.uToast.show({
            type: 'success',
            message: "申请成功",
          })
        } else {
          this.$refs.uToast.show({
            type: 'error',
            message: res.msg,
          })
        }
        this.model4 = {}
        this.teamId = ""
        this.showTeam = false
      })
    },
  }
};
</script>

<style scoped lang="scss">
.u-transition {
  position: relative;


}

.u-slot-title {
  display: flex;
  width: 240rpx;
  // justify-content: space-between;

  .title_text {
    font-size: 16px;
    margin: 0 4px;
    color: #303133;
  }
}

.menu {
  width: 100%;
  height: 100rpx;
  position: absolute;
  bottom: 0;

  .u-icon {
    width: 80rpx;
    height: 80rpx;
  }

  .icon_box {
    position: relative;
    width: 80rpx;
    height: 80rpx;
  }
}

.topbar {
  height: 100rpx;
  width: 100vw;
  padding: 10rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-sizing: border-box;

  .leftIcon {
    width: 80rpx;
    height: 80rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .content {
    width: 550rpx;
    height: 80rpx;
    align-items: center;
    line-height: 80rpx;

    span {
      font-size: 40rpx;
      font-weight: 800;
      color: #191F25;
    }
  }

  .rightIcon {
    width: 150rpx;
    height: 80rpx;
    // display: flex;
    // justify-content: flex-start;
    // align-items: center;
  }
}

.popContent {
  width: 500rpx;
  display: flex;
  border-bottom: 1rpx solid #e6e6e6;

  .login {
    width: 100%;
    height: 200rpx;
    display: flex;
    padding: 0 20rpx;
    justify-content: space-between;
    align-items: center;

    .userInfo {
      width: 330rpx;
      display: flex;
      height: 130rpx;
      justify-content: space-between;
      flex-direction: column;

      .userName {
        font-size: 20px;
        color: #4b4b4b;
        font-weight: 600;
      }

      progress {
        height: 50rpx;
      }

      .dataNum {
        font-size: 16px;
        color: #6d6d6d;
      }
    }
  }
}

.u-slot-value {
  color: #4C75FF;
  font-size: 16px;
}

.add_menu {
  width: 600rpx;
  margin: 20rpx;
}

.slot-content {
  width: 100%;
}

.modal_box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;


  .image_icon {
    margin-top: 20rpx;
    width: 200rpx;
    height: 200rpx;
  }

  .text {
    color: #404040;
    font-size: 30rpx;
    margin-bottom: 20rpx;
    text-align: center;
    line-height: 50rpx;

    .team_code {
      color: #4C75FF;
      font-size: 18px;
      font-weight: 500;
    }
  }
}
</style>